<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复杂表头的隐藏与呈现</title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.css"/>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.js"></script>
    <script>
        $(document).ready(function() {
            $('#example').DataTable( {
                "columnDefs": [ {
                    "visible": false,
                    "targets": -1                      //负数   代表所有的列    都隐藏     但是使用了  rowspan  colspan  的列会呈现
                } ]
            } );
        } );
    </script>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
    <tr>
        <th rowspan="2">Name</th>
        <th colspan="2">HR Information</th>
        <th colspan="3">Contact</th>
    </tr>
    <tr>
        <th>Position</th>
        <th>Salary</th>
        <th>Office</th>
        <th>Extn.</th>
        <th>E-mail</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Tiger Nixon</td>
        <td>System Architect</td>
        <td>$320,800</td>
        <td>Edinburgh</td>
        <td>5421</td>
        <td>t.nixon@datatables.net</td>
    </tr>
    <tr>
        <td>Garrett Winters</td>
        <td>Accountant</td>
        <td>$170,750</td>
        <td>Tokyo</td>
        <td>8422</td>
        <td>g.winters@datatables.net</td>
    </tr>
    <tr>
        <td>Ashton Cox</td>
        <td>Junior Technical Author</td>
        <td>$86,000</td>
        <td>San Francisco</td>
        <td>1562</td>
        <td>a.cox@datatables.net</td>
    </tr>
    <tr>
        <td>Cedric Kelly</td>
        <td>Senior Javascript Developer</td>
        <td>$433,060</td>
        <td>Edinburgh</td>
        <td>6224</td>
        <td>c.kelly@datatables.net</td>
    </tr>
    <tr>
        <td>Airi Satou</td>
        <td>Accountant</td>
        <td>$162,700</td>
        <td>Tokyo</td>
        <td>5407</td>
        <td>a.satou@datatables.net</td>
    </tr>
    <tr>
        <td>Brielle Williamson</td>
        <td>Integration Specialist</td>
        <td>$372,000</td>
        <td>New York</td>
        <td>4804</td>
        <td>b.williamson@datatables.net</td>
    </tr>
    <tr>
        <td>Herrod Chandler</td>
        <td>Sales Assistant</td>
        <td>$137,500</td>
        <td>San Francisco</td>
        <td>9608</td>
        <td>h.chandler@datatables.net</td>
    </tr>
    <tr>
        <td>Rhona Davidson</td>
        <td>Integration Specialist</td>
        <td>$327,900</td>
        <td>Tokyo</td>
        <td>6200</td>
        <td>r.davidson@datatables.net</td>
    </tr>
    <tr>
        <td>Colleen Hurst</td>
        <td>Javascript Developer</td>
        <td>$205,500</td>
        <td>San Francisco</td>
        <td>2360</td>
        <td>c.hurst@datatables.net</td>
    </tr>
    <tr>
        <td>Sonya Frost</td>
        <td>Software Engineer</td>
        <td>$103,600</td>
        <td>Edinburgh</td>
        <td>1667</td>
        <td>s.frost@datatables.net</td>
    </tr>
    <tr>
        <td>Jena Gaines</td>
        <td>Office Manager</td>
        <td>$90,560</td>
        <td>London</td>
        <td>3814</td>
        <td>j.gaines@datatables.net</td>
    </tr>
    </tbody>
</table>

</body>
</html>